import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Anything from '../views/Anything.vue'
import Product from '../views/Product.vue'
import News from '../views/News.vue'
import Suggest from '../views/Suggest.vue'
import Connect from '../views/Connect.vue'
import Pc from '../views/Pc.vue'
import Phone from '../views/Phone.vue'
import Detail from '../views/Detail.vue'

const Login = () => import('../views/Login.vue')
// const 
// 路由懒加载 解决 首屏加载缓慢的问题

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    meta: {
      requiresAuth: false,
      hidden: false,
      cname: '关于我们'
    },
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/product',
    name: 'Product',
    component: Product,
    meta: {
      requiresAuth: false,
      hidden: false,
      cname: '产品展示'
    },
    children:[
      {
        path: 'pc',
        name: 'Pc',
        component: Pc,
        meta: {
          requiresAuth: false,
          hidden: false,
          cname: '手提电脑 '
        },
      },
      {
        path: 'phone',
        name: 'Phone',
        component: Phone,
        meta: {
          requiresAuth: false,
          hidden: false,
          cname: '手机'
        },
      },
      {
        path: 'detail',
        name: 'Detail',
        component: Detail,
        meta: {
          requiresAuth: false,
          hidden: false,
          cname: '产品详情'
        },
      }
    ]
  },
  {
    path: '/news',
    name: 'News',
    component: News,
    meta: {
      requiresAuth: false,
      hidden: false,
      cname: '新闻中心'
    },
  },
  {
    path: '/suggest',
    name: 'Suggest',
    component: Suggest,
    meta: {
      requiresAuth: false,
      hidden: false,
      cname: '在线留言'
    },
  },
  {
    path: '/connect',
    name: 'Connect',
    component: Connect,
    meta: {
      requiresAuth: false,
      hidden: false,
      cname: '联系我们'
    },
  },
  {
    path:'/login',
    name:'Login',
    component: Login
  },
  {
    // 会匹配所有路径
    path: '*',
    name: 'Anything',
    meta: {
      hidden: true
    },
    component: Anything
  }

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 路由守卫

router.beforeEach((to, from, next) => {
  // 全局路由守卫
  console.log(from);
  console.log(to);
  if (to.meta.requiresAuth) {
    // 如果有token 就让你过去， 没有就登录去
    const token = localStorage.getItem('token');
    if (token) {
      next();
    } else {
      next({
        name: 'Login'
      })
    }
  } else {
    next()
  }
})
export default router
